<template>
  <div class="order-form">
    <button @click="goBack" class="back-button">返回</button>
    <h2>维修预约</h2>
    <form @submit.prevent="submitOrder">
      <div>
        <label for="appliance">维修设备:</label>
        <select id="appliance" v-model="order.applianceId" required>
          <option value="">请选择</option>
          <option v-for="appliance in appliances" :key="appliance.id" :value="appliance.id">
            {{ appliance.name }}
          </option>
        </select>
      </div>
      <div>
        <label for="publicationDate">购买日期:</label>
        <input type="date" id="publicationDate" v-model.number="order.publicationDate" required />
      </div>
      <div>
        <label for="warrantyDate">保修结束时间:</label>
        <input type="date" id="warrantyDate" v-model.number="order.warrantyDate" required />
      </div>
      <div>
        <label for="description">故障描述:</label>
        <input type="text" id="description" v-model="order.description" required />
      </div>
      <div>
        <label for="status">预约维修员:</label>
        <select id="status" v-model="order.status" required>
          <option value="">请选择</option>
          <option v-for="repairman in repairmen" :key="repairman.id" :value="repairman.name">
            {{ repairman.name }}
          </option>
        </select>
      </div>
      <div>
        <label for="appointmentDate">预约维修时间:</label>
        <input type="date" id="appointmentDate" v-model="order.appointmentDate" required />
      </div>
      <button type="submit" class="submit-button">提交订单</button>
    </form>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import { addOrder } from '@/api/Customer.js';
import {useRouter} from "vue-router";
const router = useRouter();
// 定义订单数据
const order = ref({
  customerName: '',
  product: '',
  quantity: ''
});
// 定义维修员列表
const repairmen = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
]);
// 定义维修设备列表
const appliances = ref([
  { id: 1, name: '电视' },
  { id: 2, name: '冰箱' },
  { id: 3, name: '洗衣机' }
]);
// 提交订单
const submitOrder = async () => {
  try {
    const response = await addOrder(order.value);
    if(response.success){
      alert('订单创建成功');
      // 清空表单
      order.value = {
        customerName: '',
        product: '',
        quantity: ''
      };
      // 跳转
      goBack();
    }
  } catch (error) {
    console.error('创建订单失败:', error);
  }
};
//跳转
const goBack = () => {
  router.push('/main/home/');
};
</script>

<style scoped>
.back-button{
  width: 100px;
}
.order-form {
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.order-form label {
  display: block;
  margin-bottom: 5px;
}

.order-form input,
.order-form select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button{
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

</style>
